<template>
    <div>
        <NavBar>
            <template v-slot:default>商品详情:{{id}}</template>
        </NavBar>
        
        <van-image style="margin-top:50px"
                   width="100%"
                   lazy-load
                   :src="detail.cover_url"
        />
        
        <van-card style="text-align: left"
                  :num="detail.stock"
                  :price="detail.price+'.00'"
                  :desc="detail.description"
                  :title="detail.title"
        >
            <template #tags>
                <van-tag plain type="danger">新书</van-tag>
                <van-tag plain type="danger">推荐</van-tag>
            </template>
            <template #footer>
                <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
                <van-button type="danger" @click="goToCart">立即购买</van-button>
            </template>
        </van-card>
        
        <div class="v-tabs">
            <van-tabs v-model="active">
                <van-tab title="概述">
                    <div id="con1" v-html="detail.details">
            
                    </div>
                </van-tab>
                <van-tab title="热评">
        
                </van-tab>
                <van-tab title="相关图书">
                    <goods-list :goods="like_goods"></goods-list>
        
                </van-tab>
    
            </van-tabs>
        </div>
    
    </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import GoodsList from "components/content/goods/GoodsList";
import {useRoute, useRouter} from 'vue-router';
import {useStore} from 'vuex';
import {ref, onMounted, reactive, toRefs} from 'vue';
import {getDetail} from "network/detail";
import {addCart, getCart} from 'network/cart';
import {Toast} from 'vant';
export default {
    name: "Detail",
    components: {
        NavBar,
        GoodsList
    },
    mounted() {
        // console.log('detail页面创建了');
        
    },
    unmounted() {
        // console.log('detail页面被销毁了');
    },
    setup() {
        let  active = ref(1);
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        
        let id = ref(0);
        let book = reactive({
            detail:{},
            like_goods:[]
        });
        
        onMounted(()=>{
            id.value = route.query.id;
            
            getDetail(id.value).then(res=>{
                book.detail = res.goods;
                book.like_goods = res.like_goods;
                
                
            })
        })
        
        // 添加购物车
        const handleAddCart = () =>{
            if (store.state.user.isLogin) {
                addCart({goods_id: book.detail.id, num: 1}).then(res => {
                    if(res.status == '204' || res.status == '201') {
                        Toast.success('添加成功')
                        // 设置store中 cartCount
                        store.dispatch('updateCart')
                    }
                })
            } else {
                Toast.fail('请先登录')
            }
            
            // 获取购物车列表
            // getCart().then(res => {
            //     let sum;
            //     res.data.map(item => {
            //         console.log(item.num);
            //     })
            // })
        }
        
        // 立即购买
        const goToCart = () =>{
            if (store.state.user.isLogin) {
                addCart({goods_id:book.detail.id, num:1}).then(res=>{
                    if(res.status == '204' || res.status == '201') {
                        Toast.success('添加成功,显示购物车');
                        // 设置store中 cartCount
                        store.dispatch('updateCart')
                        router.push({path:'/shopcart'});
                    }
        
                })
            } else {
                Toast.fail('请先登录')
            }
        }
        
        return {
            id,
            ...toRefs(book),
            active,
            handleAddCart,
            goToCart
        }
    }
}
</script>

<style scoped lang="scss">
#con1 {
    padding:10px;
    
}
.van-tabs__nav--line {
    box-sizing: border-box !important;
}

</style>